<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="format-detection" content="telephone=no" />
    <title>区块链浏览器</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/iconfont.css" />
    <link rel="stylesheet" href="/css/element-icons.css" />
    <link rel="stylesheet" href="/css/newiconfont.css" />
    <script src="/js/jquery.min.js"></script>
    <script src="/js/lib.js"></script>
    <!--https://echarts.apache.org/zh/builder.html-->
    <!--  需要一个兼容ie的资源, 一时没找到，上面的链接可以定制  -->
    <!-- <script src="/js/old-echarts.min.js"></script> -->
    <script src="/js/echarts/echarts.min.js"></script>
    <!--[if lt IE 9]>
        <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.bootcss.com/respond./js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--[if IE]>
        <link rel="stylesheet" href="/css/all-ie-only.css" />
    <![endif]-->
</head>

<body class="bodyBg1">
    <div class="header3 fix">
        <div class="wp fix">
            <a href="/browser/home/index.html" class="header3-logo">
                <img src="/images/logo2.png" alt="" />
                <h2>区块链浏览器</h2>
            </a>
            <ul class="header3-nav">
                <li class="active">
                    <a href="/browser/home/index.html">首页<i class="el-icon-arrow-down"></i></a>
                    <div class="header3-navsub"></div>
                </li>
                <li>
                    <a href="javascript:void(0);">区块链<i class="el-icon-arrow-down"></i></a>
                    <div class="header3-navsub">
                        <div class="con">
                            <a href="/browser/blockChain/index.html">区块</a>
                            <a href="/browser/deal/index.html">交易</a>
                            <a href="/browser/bid/index.html">BID</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="javascript:void(0);">节点<i class="el-icon-arrow-down"></i></a>
                    <div class="header3-navsub">
                        <div class="con">
                            <a href="/browser/consensusNode/index.html">共识节点</a>
                            <a href="/browser/canstrustNode/index.html">可信节点</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="/browser/contract/index.html">合约<i class="el-icon-arrow-down"></i></a>
                    <div class="header3-navsub"></div>
                </li>
                <li>
                    <a href="http://www.sgcc.com.cn/" target="__black">关于我们<i class="el-icon-arrow-down"></i></a>
                    <div class="header3-navsub"></div>
                </li>
            </ul>
            <div class="header3-search">
                <form action="">
                    <input type="text" id="navSearchKey" class="inp" placeholder="地址/交易哈希/区块高度/区块哈希" />
                    <i class="el-icon-search" id="navSearchBtn"></i>
                    <a href="" id="searchLink" target="_black" style="display: none"><span>go</span></a>
                </form>
            </div>
            <div class="header3-btn">
                <ul class="header3-nav2">
                    <li>
                        <a href="">网络</a>
                        <div class="header3-navsub">
                            <div class="con">
                                <a href="">主网</a>
                                <a href="">测试网</a>
                            </div>
                        </div>
                    </li>
                    <li class="lang">
                        <a href="">语言</a>
                        <div class="header3-navsub">
                            <div class="con">
                                <a href="">汉语</a>
                                <a href="">英语</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="search-box" style="background-image:url('/images/bg1.png');">
            <div class="wp">
                <div class="jiexi1-hd">
                    <h3>查询</h3>
                    <div class="form-search">
                        <form>
                            <input type="text" id="searchKey" class="inp" autocompvare="off" placeholder="地址/交易哈希/区块高度/区块哈希">
                            <button class="btn" id="searchBtn">
                                <img src="/images/so.png" alt="">
                                搜索
                            </button>
                        </form>
                    </div>
                    <div style="text-align:center;" id="searchEmpty"></div>
                </div>
            </div>
        </div>
        <div class="m-dataModule1">
            <div class="wp">
                <div class="dataPanel-box1">
                    <div class="item">
                        <ul class="dataPanel-ul">
                            <li class="nowrap">
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg2.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/BID1.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/BID1_on.png');"></i>
                                        <h4>BID总数</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="bidTotal"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg2.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/BID2.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/BID2_on.png');"></i>
                                        <h4>近30天新增用户</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="bidLast30"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg2.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/BID3.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/BID3_on.png');"></i>
                                        <h4>企业用户数</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="bidCorp"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul class="dataPanel-ul">
                            <li class="nowrap">
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg3.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/jiedian1.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/jiedian1_on.png');"></i>
                                        <h4>节点总数</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="nodeTotal"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg3.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/jiedian2.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/jiedian2_on.png');"></i>
                                        <h4>共识节点数</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="consensusToal"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg3.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/jiedian3.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/jiedian3_on.png');"></i>
                                        <h4>可信节点数</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="trustTotal"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul class="dataPanel-ul">
                            <li class="nowrap">
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg4.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/jiaoyi1.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/jiaoyi1_on.png');"></i>
                                        <h4>交易总数</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="transactionTotal"></span>
                                    </div>
                                </div>
                            </li>
                            <li class="nowrap">
                                <div class="con">
                                    <div class="bg" style="background-image:url('/images/bg4.png');"></div>
                                    <div class="tit">
                                        <i class="icon" style="background-image:url('/images/jiaoyi2.png');"></i>
                                        <i class="icon_on" style="background-image:url('/images/jiaoyi2_on.png');"></i>
                                        <h4>区块高度</h4>
                                    </div>
                                    <div class="bt">
                                        <span id="maxBlockNumber">2,457,163</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="charts-box1">
                    <div class="charts-hd">
                        <div class="chart-titleWrap">
                            <div class="title">每日交易总数</div>
                            <div class="unit">单位：笔</div>
                        </div>
                        <div class="chart1" id="tradeChart"></div>
                    </div>
                    <div class="charts-bt">
                        <div class="col-l">
                            <div class="chart-titleWrap">
                                <div class="title">每日活跃BID地址数</div>
                                <div class="unit">单位：个</div>
                            </div>
                            <div class="chart2" id="bidAddressChart"></div>
                        </div>
                        <div class="col-r">
                            <div class="chart-titleWrap">
                                <div class="title"> 每日投票数</div>
                                <div class="unit">单位：票</div>
                            </div>
                            <div class="chart3" id="voteChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="m-dataModule2" style="background-image:url('/images/bg5.png');">
            <div class="wp">
                <div class="con">
                    <div class="title">BID钱包</div>
                    <div class="tip">官网BID区块标识 - 人人都在用的数字身份APP</div>
                    <a href="https://www.teleinfo.cn/" target="_black" class="btn">查看详情</a>
                </div>
            </div>
        </div> -->
        <div class="m-dataModule3">
            <div class="wp">
                <div class="dataPanel-box2">
                    <div class="col-l">
                        <div class="tit-1">
                            <a href="/browser/blockChain/index.html" class="more">更多<i></i></a>
                            <h3>最新区块</h3>
                        </div>
                        <ul class="dataPanel-ul2" id="lastBlockChainUl"></ul>
                    </div>
                    <div class="col-r">
                        <div class="tit-1">
                            <a href="/browser/deal/index.html" class="more">更多<i></i></a>
                            <h3>最新交易</h3>
                        </div>
                        <ul class="dataPanel-ul2 dataPanel2_2" id="lastTardeUl"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer3">
        <div class="wp">
            <div class="footer3-link">
                <div class="item">
                    <h4>区块链</h4><em>/</em>
                    <a href="/browser/blockChain/index.html">区块</a>
                    <a href="/browser/deal/index.html">交易</a>
                    <a href="/browser/bid/index.html">BID</a>
                </div>
                <div class="item">
                    <h4>节点</h4><em>/</em>
                    <a href="/browser/consensusNode/index.html">共识节点</a>
                    <a href="/browser/canstrustNode/index.html">可信节点</a>
                </div>
                <div class="item">
                    <a href="http://www.sgcc.com.cn/" target="__black">关于我们</a>
                </div>
            </div>
            <div class="footer3-copy">
                <p>Copyright © 2016-2021 北京泰尔英福网络科技有限责任公司 京ICP备18017811号-1</p>
            </div>
        </div>
    </div>
    <div class="pop-bg"></div>
    <!-- 合约禁用弹窗 -->
    <div class="m-pop" id="pop-heyuejinyong">
        <div class="win-pop1">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>合约禁用</h3>
            </div>
            <div class="win1-bd">
                <div class="win1-item">
                    <div class="tit">禁用原因<span>*</span></div>
                    <div class="con">
                        <input type="text" class="input-inner" />
                    </div>
                </div>
            </div>
            <div class="win-bt">
                <a href="javascript:;" class="js-btn"><span>取 消</span></a>
                <a href="" class="primary-btn"><span>确 定</span></a>
            </div>
        </div>
    </div>
    <!-- 合约禁用弹窗 end -->
    <!-- 撤销弹窗 -->
    <div class="m-pop" id="pop-chexiaozhengshu">
        <div class="win-pop1">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>撤销</h3>
            </div>
            <div class="win1-bd">
                <div class="win1-item">
                    <div class="tit">撤销原因:</div>
                    <div class="con">
                        <textarea class="textarea-inner" placeholder="请输入撤销原因"></textarea>
                    </div>
                </div>
            </div>
            <div class="win-bt">
                <a href="" class="primary-btn"><span>提交</span></a>
                <a href="javascript:;" class="js-btn"><span>返回</span></a>
            </div>
        </div>
    </div>
    <!-- 撤销弹窗 end -->
    <!-- 禁用弹窗 -->
    <div class="m-pop" id="pop-jinyong">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-info"></div>
                    <div class="desc">
                        <p>您确定要禁用标识吗？</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 禁用弹窗 end -->
    <!-- 启用弹窗 -->
    <div class="m-pop" id="pop-qiyong">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-info"></div>
                    <div class="desc">
                        <p>您确定要启用标识吗？</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 启用弹窗 end -->
    <!-- 下载KeyStore -->
    <div class="m-pop" id="pop-xiazaiKeyStore">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="tit">请输入创建人的私钥</div>
                    <div class="con">
                        <input type="text" class="input-inner" />
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 下载KeyStore end -->
    <!-- 删除 -->
    <div class="m-pop" id="pop-shanchu">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-warning"></div>
                    <div class="desc">
                        <p>此操作将永久删除该数据, 是否继续?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 删除 end -->
    <!-- 删除2 -->
    <div class="m-pop" id="pop-shanchu2">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-info"></div>
                    <div class="desc">
                        <p>确定删除选中角色?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 删除2 end -->
    <!-- 删除3 -->
    <div class="m-pop" id="pop-shanchu3">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <!-- <h3>提示</h3> -->
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-warning"></div>
                    <div class="desc">
                        <p>确定将选择数据删除?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 删除3 end -->
    <!-- 删除4 -->
    <div class="m-pop" id="pop-shanchu4">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <!-- <h3>提示</h3> -->
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-warning"></div>
                    <div class="desc">
                        <p>确定将选择数据删除?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 删除4 end -->
    <!-- 移至黑名单 -->
    <div class="m-pop" id="pop-yizhiheimingdan">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-warning"></div>
                    <div class="desc">
                        <p>确定将该用户移至黑名单吗?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 移至黑名单 end -->
    <!-- 升至管理员 -->
    <div class="m-pop" id="pop-shengzhiguanliyuan">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-warning"></div>
                    <div class="desc">
                        <p>确定将该用户添加至管理员?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 升至管理员 end -->
    <!-- 移除管理员 -->
    <div class="m-pop" id="pop-yichuguanliyuan">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>提示</h3>
            </div>
            <div class="win3-bd">
                <div class="win3-item">
                    <div class="icon_dn el-icon-info"></div>
                    <div class="desc">
                        <p>确定移除该用户管理员?</p>
                    </div>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 移除管理员 end -->
    <!-- 重置密码 -->
    <div class="m-pop" id="pop-chongzhimima">
        <div class="win-pop3">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-icon-close"></i>
                    </a>
                </div>
                <h3>请输入接收密码的邮箱</h3>
            </div>
            <div class="win3-bd">
                <div class="form-1 form-4">
                    <form action="">
                        <div class="form-item col-1">
                            <div class="tit"></div>
                            <div class="con">
                                <input type="text" class="input-inner" placeholder="">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="win-bt2">
                <a href="javascript:;" class="js-btn"><span>取消</span></a>
                <a href="" class="primary-btn"><span>确定</span></a>
            </div>
        </div>
    </div>
    <!-- 重置密码 end -->
    <!-- 钱包解锁弹窗 -->
    <div class="m-pop" id="pop-qianbaojiesuo">
        <div class="win-pop2">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </a>
                </div>
                <h3>钱包解锁</h3>
            </div>
            <div class="win1-bd">
                <div class="win2-item">
                    <div class="tit">请选择方式：</div>
                    <div class="con">
                        <ul class="radio-group js-custom-radio-checkbox" data-modulename="formrel01">
                            <li data-selectName=".item-select1">
                                <label>
                                    <input type="radio" name="1" checked />
                                    <i class="icon"></i>
                                    <span>BID keystore 文件</span>
                                </label>
                            </li>
                            <li data-selectName=".item-select2">
                                <label>
                                    <input type="radio" name="1" />
                                    <i class="icon"></i>
                                    <span>BID私钥</span>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="win2-item item-select1">
                    <div class="tit">请选择BID Keystore文件</div>
                    <div class="con">
                        <div class="file-upload_box3">
                            <div class="fileUpload-btn3">
                                <label>
                                    <input type="file" class="js-upload">
                                    <span><i class="icon_dn el-icon-upload e-upload"></i>选择文件</span>
                                </label>
                            </div>
                            <ul class="fileUpload-files">
                                <!-- <li>
                                <a href="javascript:;">
                                    <i class="el-icon-document"></i>
                                    <span>5cd67b13-740e-4f77-b950-09e47e60881d (1).json</span>
                                </a>
                                <i class="el-icon-close"></i>
                            </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="win2-item col-1 item-select1">
                    <div class="tit">请输入密码：</div>
                    <div class="con">
                        <div class="input-suffix">
                            <input type="password" class="input-inner" placeholder="请输入密码" />
                            <div class="icon">
                                <i class="el-input__icon i-changetype el-icon-view"></i>
                                <i class="el-input__icon el-icon-circle-close"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="win2-item col-1 item-select2">
                    <div class="tit">请输入BID私钥：</div>
                    <div class="con">
                        <div class="input-suffix">
                            <input type="password" class="input-inner" placeholder="请输入BID私钥" />
                            <div class="icon">
                                <i class="el-input__icon i-changetype el-icon-view"></i>
                                <i class="el-input__icon el-icon-circle-close"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="win-bt win-bt_center">
                <a href="javascript:;" class="js-btn"><span>取 消</span></a>
                <a href="" class="primary-btn"><span>确 定</span></a>
            </div>
        </div>
    </div>
    <!-- 钱包解锁弹窗 end -->
    <!-- 显隐 -->
    <div class="m-pop" id="pop-xianyin">
        <div class="win-pop5">
            <div class="win1-hd">
                <div class="win1-btn">
                    <a href="javascript:;" class="close js-close">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </a>
                </div>
                <h3>多 选</h3>
            </div>
            <div class="win1-bd">
                <ul class="checkbox-group2 js-custom-radio-checkbox" data-modulename="formrel01">
                    <li>
                        <label>
                            <input type="checkbox" name="1" checked />
                            <i class="icon"></i>
                            <span>角色名称</span>
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox" name="1" />
                            <i class="icon"></i>
                            <span>所属租户</span>
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox" name="1" />
                            <i class="icon"></i>
                            <span>角色别名</span>
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox" name="1" />
                            <i class="icon"></i>
                            <span>角色排序</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 显隐 end -->
    <script src="/js/module.js"></script>
    <script src="/js/page.js"></script>
    <script src="/js/moment.js"></script>
    <script crossorigin="anonymous" integrity="sha384-TbSTMfiq/daLdTvhmqVy43eckm00RRrmDcQCwQgXF7eYUbSLF4r9bAp7/nhNVRP3" src="https://lib.baomitu.com/swfobject/2.2/swfobject.min.js"></script>

    <script type="text/javascript">
        // 设置moment语言
        moment.defineLocale('zh-cn', {
            relativeTime : {
                future :'%s内',
                past :'%s前',
                s :'几秒',
                m :'1 分钟',
                mm :'%d 分钟',
                h :'1 小时',
                hh :'%d 小时',
                d :'1 天',
                dd :'%d 天',
                M :'1 个月',
                MM :'%d 个月',
                y :'1 年',
                yy :'%d 年'
            },
        });
    </script>
    <script type="text/javascript">
        var dayCount = 30
        var tradeChart = echarts.init(document.getElementById('tradeChart'));
        var bidAddressChart = echarts.init(document.getElementById('bidAddressChart'));
        var votetChart = echarts.init(document.getElementById('voteChart'));

        var getChartData = function(originData, tooltipName, lineColor) {
            var xAxisData = [], yAxisData = [];
            $.each(originData, function(i, item){
                xAxisData.push(item.ddate),
                yAxisData.push(item.dcount)
            })
            return {
                animation: false,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                    },
                    axisTick:{
                        show:false
                    },
                    data: xAxisData,
                    inverse: true,
                    axisLabel: {
                        formatter:function(value) {
                            return value && value.substring(value.length - 5) || ''
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true
                    },
                    axisTick:{
                        show: true
                    },
                },
                grid: {
                    top: 40,
                    left: 40,
                    right: 40,
                    bottom: 40
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: lineColor
                        }
                    },
                    formatter: function(params) {
                        console.log(params)
                        return params[0].name + '<br/>' + '<span style=\"display:inline-block;color:' + lineColor + ';font-size:12px\">' + params[0].marker + tooltipName + '：' + params[0].value + '</span>'
                    }
                },
                series: [
                    {
                        data: yAxisData,
                        type: 'line',
                        lineStyle: {
                            color: lineColor
                        },
                        showSymbol: false,
                        itemStyle: {
                            color: lineColor,
                            borderColor: lineColor
                        }
                    }
                ]
            }
        }
        
        // 获取数据总览数据
        function getSummaryData (bid) {
            $request({
                url: '/api/blade-DWHMonitor/api/brs/summary/getIndexSectionSummayData',
                method: 'post'
            }, function (res) {
                renderSummaryData(res)
            })
        }
        // 获取交易图表数据
        function getTradeChartData() {
            $request({
                url: '/api/blade-DWHMonitor/api/brs/tx/queryLastDayTotal',
                method: 'post',
                data: {dayCount: dayCount}
            }, function (res) {
                var records = res.records || []
                var options = getChartData(records, '交易数量')
                renderCharts(tradeChart, options)
            })
        }
        // 获取bid图表数据
        function getBidChartData() {
            $request({
                url: '/api/blade-DWHMonitor/api/brs/bid/queryLastDayTotal',
                method: 'post',
                data: {dayCount: dayCount}
            }, function (res) {
                var records = res.records || []
                var options = getChartData(records, 'BID用户', '#efbe28')
                renderCharts(bidAddressChart, options)
            })
        }
        // 获取投票图表数据
        function getVoteChartData() {
            $request({
                url: '/api/blade-DWHMonitor/api/brs/vote/queryLastDayTotal',
                method: 'post',
                data: {dayCount: dayCount}
            }, function (res) {
                var records = res.records || []
                var options = getChartData(records, '投票数', '#25cac4')
                renderCharts(votetChart, options)
            })
        }

        // 获取最新区块列表
        function getBlockChainList() {
            $request({
                url: '/api/blade-DWHMonitor/api/wsmain/broadCastLatestBlock6',
                method: 'post',
                data: {},
                contentType: 'application/x-www-form-urlencoded'
            }, function (res) {
                var records = res || []
                renderLastBlockChain(records)
            })
        }
       
        // 获取交易列表数据
        function getDealList() {
            $request({
                url: '/api/blade-DWHMonitor/api/wsmain/broadCastLatestTransaction',
                method: 'post',
                data: {},
                contentType: 'application/x-www-form-urlencoded'
            },  function (res) {
                var records = res || []
                renderLastTrade(records)
            })
        }

        // 搜索
        function searchKeyWord(key, type) {
            if (!key) {
                return
            }
            $request({
                url: '/api/blade-DWHMonitor/api/brs/summary/searchByKey',
                method: 'post',
                data: { key: key },
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
            }, function (res) {
                if (!res || JSON.stringify(res) === '{}') {
                    if (type == 'main') {
                        $('#searchEmpty').html('暂未查询到相关内容~')
                    } else {
                      alert('暂未查询到相关内容~')  
                    }
                } else {
                    $('#searchEmpty').empty()
                    var url = ''
                    switch(res) {
                        case 1:
                        case 6:
                            url ='/browser/bid/detail.html?bid=' + key
                            break
                        case 2:
                            url = '/browser/deal/detail.html?hash=' + key
                            break
                        case 3:
                           url = '/browser/blockChain/detail.html?number=' + key
                            break
                        case 4:
                            url = '/browser/blockChain/detail.html?hash=' + key
                            break
                        case 5:
                            url = '/browser/contract/detail.html?address=' + key
                            break
                        default:
                            break
                    }
                    if (url) {
                        $('#searchLink')[0].setAttribute('href', url)
                        $('#searchLink span').trigger('click')
                    }
                }
            })
        }
        // var ws = new WebSocket("ws://" + location.host + "/ws/blade-DWHMonitor/api/brs/wsmain");
        // ws.onopen = function () {
        //     ws.send('wsdata')
        // }
        // ws.onmessage = function (e) {
        //     var data = JSON.parse(e.data || '{}') || {}
        //     if (data.type === 3) {
        //         renderLastBlockChain(data.data || [])
        //     } else if (data.type === 2) {
        //         renderLastTrade(data.data || [])
        //     }
        // }
        // ws.onerror = function (e) {
        //     console.log(error);
        // }
        //
        // function myEventHandler(data) {
        //     if (ws.readyState === WebSocket.OPEN) {
        //         ws.send(data);
        //     }
        // }

        function renderSummaryData(data) {
            $('#bidTotal').html(data.bidTotal || 0)
            $('#bidLast30').html(data.bidLast30 || 0)
            $('#bidCorp').html(data.bidCorp || 0)
            $('#nodeTotal').html(data.nodeTotal || 0)
            $('#consensusToal').html(data.consensusToal || 0)
            $('#trustTotal').html(data.trustTotal || 0)
            $('#transactionTotal').html(data.transactionTotal || 0)
            $('#maxBlockNumber').html(data.maxBlockNumber || 0)
        }

        // 初始化图表
        function renderCharts(el, data) {
            console.log(el, data)
            el.setOption(data)
        }

        function renderLastBlockChain(data) {
            var tempvare = '';
            $.each(data, function(i, item){
                tempvare = tempvare + "<li>" +
                    "<a href=/browser/blockChain/detail.html?number=" + item.number + " class='con'>" +
                    "<div class='data'>" +
                    "<div class='name'>" +
                    "<i class='icon' style='background-image:url(/images/qukuai1.png)'></i>" +
                    "<span>" + item.number + "</span>" +
                    "</div>" +
                    "<div class='time'>" + moment(item.createTimeLong).fromNow() + "</div>" +
                    "</div>" +
                    "<div class='txt'>" + item.size + "byte</div>" +
                    "<div class='number'>" + item.txCount + "条交易数据</div>" +
                    "</a>" +
                    "</li>"
            })
            $('#lastBlockChainUl').empty().append(tempvare)
        }

        function renderLastTrade(data) {
            var tardeTextMap = {
                1: '普通交易',
                2: '合约交易'
            }
            var tempvare = ''
            $.each(data, function(i, item){
                tempvare = tempvare + "<li>" +
                    "<a href=/browser/deal/detail.html?hash=" + item.hash + " class='con'>" +
                    "<div class='data'>" +
                    "<div class='name'>" +
                    "<i class='icon' style='background-image:url(/images/zuixinjiaoyi1.png)'></i>" +
                    "<span>hash1..." + item.hash + "</span>" +
                    "</div>" +
                    "<div class='time'>" + moment(item.timestamp).fromNow() + "</div>" +
                    "</div>" +
                    "<div class='txt'>" + (tardeTextMap[item.transType] || '') + "</div>" +
                    "</a>" +
                    "</li>"
            })
            $('#lastTardeUl').empty().append(tempvare)
        }

        // 绑定搜索按钮事件
        function bindSerachEvent() {
            $('#searchBtn').click(function(e) {
                e.preventDefault()
                searchKeyWord($('#searchKey').val(), 'main')
            })
            $('#navSearchBtn').click(function(e) {
                e.preventDefault()
                searchKeyWord($('#navSearchKey').val(), 'nav')
            })
        }

        // 最新区块/最新交易定时刷新
        function addRefreshTimer() {
            setInterval(function() {
                getBlockChainList()
                getDealList()
            }, 10000)
        }

        function init() {
            // myEventHandler()
            getSummaryData()
            getTradeChartData()
            getBidChartData()
            getVoteChartData()
            getBlockChainList()
            getDealList()
            bindSerachEvent()
            addRefreshTimer()
        }
        init();
        // 处理
        dealInputPlaceholder();
    </script>
</body>

</html>
